<template>
  <div style="width: 58%; height: 100%; margin: 20px auto">
    <span v-for="(good, index) in goods" :key="index">
      <income-item
        :index="index + 1"
        :good="good"
        :categories="categories"
        style="margin-bottom: 2px"
      />
    </span>
  </div>
</template>

<script setup lang="ts">
import IncomeItem from "../../../components/IncomeItem.vue";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

// Reactive data
const num = ref<number>(10);
const goods = ref<any[]>([]);
const categories = ref<any[]>([]);

// Load data
const loadData = () => {
  store.state.request.get("/api/category").then((res: any) => {
    if (res.code === "200") {
      categories.value = res.data;
    }

    store.state.request
      .get("/api/good/rank/", {
        params: { num: num.value },
      })
      .then((res: any) => {
        if (res.code === "200") {
          goods.value = res.data;
        }
      });
  });
};

// Lifecycle
onMounted(() => {
  loadData();
});
</script>

<style scoped></style>
